CSS Counter Style'i meistriklass: Negatiivsete numbrite vormindamine globaalsetele publikutele

Veebidisaini pidevalt arenevas maastikus on numbrite täpne ja kultuuriliselt tundlik esitamine esmatähtis, eriti negatiivsete väärtustega töötamisel. Kuigi CSS pakub sisu stiilimiseks robustseid tööriistu, on negatiivsete numbrite nuansseeritud vormindamine globaalse publiku jaoks ajalooliselt nõudnud keerukaid JavaScript-lahendusi või serveripoolsele logiikale tuginemist. Kuid CSS Counter Styles mooduli kasutuselevõtu ja kasvava kasutuselevõtuga on disaineritel ja arendajatel nüüd võimas, natiivne viis loendurite ja loendi üksuste kuvamise kontrollimiseks, sealhulgas sageli keeruka negatiivsete numbrite vormindamise.

See põhjalik juhend sukeldub CSS Counter Style'i võimalustesse negatiivsete numbrite vormindamiseks. Uurime aluspõhimõtteid, demonstreerime praktilisi rakendusi ja pakume ülevaadet nende tehnikate kasutuselevõtuks tõeliselt rahvusvahelise veebipressi jaoks.

Negatiivsete numbrite vormindamise väljakutse

Negatiivsed numbrid esitatakse erinevalt erinevates kultuurides ja kontekstides. Levinud tähistused hõlmavad:

• Esimene miinusmärk: -10
• Sulgud: (10)
• Viimane miinusmärk: 10-
• Konkreetne valuutasümboli paigutus: -$10 või 10$

Lisaks lihtsale esitusele dikteerib numbri kontekst sageli selle vormingu. Näiteks finantsaruanded võivad eelistada negatiivsete numbrite jaoks sulgusid, et visuaalselt eristada neid positiivsetest numbritest, samal ajal kui teaduslikel tähistustel võivad olla oma konventsioonid. Selle standardimine globaalsel veebisaidil, kus kasutajad suhtlevad erinevatest taustadest, võib olla märkimisväärne disainiväljakutse.

Ajalooliselt oli sellise kontrollitaseme saavutamine CSS-is suvaliste loendurite jaoks piiratud. Arendajad kasutasid sageli:

• Serveripoolne renderdamine: Numbrite vormindamine enne nende brauserisse saatmist.
• JavaScripti manipuleerimine: JavaScripti kasutamine negatiivsete numbrite tuvastamiseks ja sobivate klasside või stiilide rakendamiseks.
• Eelmääratletud CSS-klassid: Erinevate negatiivsete numbrite vormingute jaoks mitmete klasside loomine (nt .negative-paren, .negative-dash).

Need meetodid, kuigi funktsionaalsed, võivad põhjustada vähem hooldatavat koodi, pikemaid laadimisaegu ja sisu ning esitusloogika vahelist lahknemist.

Tutvumine CSS Counter Styles'iga

CSS Counter Styles moodul pakub deklaratiivset viisi kohandatud loendi üksuste markerite ja loenduri stiilide määratlemiseks. See võimaldab arendajatel luua keerukaid nummerdamissüsteeme, mis ületavad standardset decimal, lower-alpha või upper-roman. Selle tuumaks on @counter-style reegli kasutamine nimetatud loenduri stiili määratlemiseks, mida saab seejärel rakendada list-style-type atribuudi või counter-set ja counter() CSS-funktsioonide abil.

Negatiivsete numbrite vormindamise tõeline võimsus peitub @counter-style reegli negative deskriptoris. See deskriptor võimaldab teil määrata negatiivsete loendurite väärtuste vormingu, mis erineb mitte-negatiivsete väärtuste vormingust.

@counter-style reegel ja selle deskriptorid

Tavalisel @counter-style reeglil on järgmine struktuur:

            @counter-style custom-counter-name {
  /* Deskriptorid siin */
}

            

              
                Copy
              
            
          

Numbrite vormindamisega seotud peamised deskriptorid hõlmavad:

• name: loenduri stiili nimi (nõutav).
• symbols: numbrite esindamiseks kasutatavad märgid või stringid (nt '0' '1' '2' ... '9' kümnendkohtade jaoks).
• suffix: loenduri väärtusele lisatav string (nt '.' kümnendkohtade loenduri markerite jaoks).
• pad-with: tagab, et loenduri väärtusel oleks minimaalne laius, täites selle kindlaksmääratud märgiga.
• speak-as: määratleb, kuidas abitehnoloogiad loendurit peaksid hääldama.
• fallback: varu loenduri stiil, mida kasutada, kui kohandatud stiili ei saa renderdada.
• additive-symbols: liit-süsteemide jaoks nagu Rooma numbrid.
• range: määratleb stiili rakenduvate loenduri väärtuste ulatuse (nt '0' infinity positiivsete jaoks, '-infinity' '0' negatiivsete jaoks).
• negative: negatiivsete numbrite jaoks rakendatav vorming. See on meie peamine fookus.

negative deskriptori mõistmine

negative deskriptor aktsepteerib stringide loendit, mis määravad prefiksi, numbri esituse ja sufiksi negatiivsete väärtuste jaoks. Vorming järgib üldiselt:

            negative: prefix number-representation suffix;

            

              
                Copy
              
            
          

Näiteks:

• negative: '-' ; (lisab numbri ette miinusmärgi)
• negative: '(' ')' ; (ümbritseb numbri sulgudega)
• negative: '' '-' ; (lisab numbri järele miinusmärgi)

number-representation võib olla süsteemi määratud võtmesõna nagu '...' (mis viitab numbri enda standardsele esitusele) või konkreetne vormingu string.

Praktilised näited negatiivsete numbrite vormindamisest CSS Counter Styles'iga

Illustreerime, kuidas kasutada negative deskriptorit erinevate negatiivsete numbrite vormindusstiilide saavutamiseks.

Näide 1: Standardne miinusmärgi prefiks

See on kõige tavalisem esitus. Soovime, et negatiivsed numbrid kuvataks koos ees oleva miinusmärgiga, nagu -10.

            @counter-style negative-dash {
  symbols: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9';
  suffix: '.';
  negative: '-' ; /* Vormindab negatiivseid numbreid ees oleva miinusmärgiga */
  range: -infinity 0;
}

/* Rakendage järjestatud loendile */
.financial-list {
  list-style-type: negative-dash;
}

            

              
                Copy
              
            
          

Kui meil oleks loendielemente, mille väärtused on seatud counter-set abil, näiteks:

            .item-positive { counter-set: financial-value 50; }
.item-negative { counter-set: financial-value -25; }

            

              
                Copy
              
            
          

Ja seejärel kasutaksime counter(financial-value) pseudoelemendi sees, oleks väljund:

• 50.
• -25.

Näide 2: Sulud negatiivsete numbrite jaoks

Paljud finants- ja raamatupidamiskontekstid eelistavad negatiivseid numbreid ümbritsevate sulgudega. Näiteks (25).

            @counter-style negative-paren {
  symbols: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9';
  suffix: '';
  negative: '(' ')' ; /* Ümbritseb negatiivsed numbrid sulgudega */
  range: -infinity 0;
}

.account-list {
  list-style-type: negative-paren;
}

            

              
                Copy
              
            
          

Koos counter-set: financial-value -25; oleks väljund:

• (25)

Näide 3: Viimane miinusmärk

Kuigi läänekultuurides vähem levinud, võivad mõned piirkondlikud konventsioonid kasutada viimast miinusmärki, näiteks 25-.

            @counter-style negative-trailing-dash {
  symbols: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9';
  suffix: '';
  negative: '' '-' ; /* Lisab numbri järele miinusmärgi */
  range: -infinity 0;
}

.billing-list {
  list-style-type: negative-trailing-dash;
}

            

              
                Copy
              
            
          

Koos counter-set: financial-value -25; oleks väljund:

• 25-

Näide 4: Valuutasümbolite kaasamine

Valuutasümbolite integreerimine negatiivsete numbrite vormindamisega lisab veel ühe keerukuse kihi. CSS Counter Styles saab seda hallata, kaasates sümbolid negative deskriptorisse. Näiteks negatiivsete USA dollarite esitamiseks kui -$10.

            @counter-style negative-usd {
  symbols: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9';
  suffix: '';
  negative: '-$' ; /* Lisab negatiivsete numbrite jaoks prefiksi '-$' */
  range: -infinity 0;
}

.currency-list {
  list-style-type: negative-usd;
}

            

              
                Copy
              
            
          

Koos counter-set: currency-value -25; oleks väljund:

• -$25

Oluline kaalutlus globaalse valuuta jaoks: Kuigi see demonstreerib mehhanismi, nõuab tõeline globaalne valuuta vormindamine rohkem kui lihtsalt staatilist prefiksi. Erinevatel piirkondadel on erinevad valuutasümbolid, paigutused ning kümnend- ja tuhandete eraldajad. Põhjaliku rahvusvahelise valuuta vormindamise jaoks on sageli vaja kombineerida CSS Counter Styles lokaliseerimisteekide või serveripoolse logiikaga, mis tuvastab kasutaja asukoha ja rakendab õige vorminduse.

Näide 5: Ulatuse ja negatiivse vormindamise ühendamine

range deskriptor on konkreetse stiili rakendamise hetke määratlemisel kriitilise tähtsusega. Vaikimisi rakendub range: '0' infinity; mitte-negatiivsetele numbritele ja range: '-infinity' '0'; negatiivsetele numbritele. Saame neid vahemikke vajadusel selgesõnaliselt määratleda, kuid sageli on negative vaikimisi käitumine piisav, kui seda kasutatakse koos vaikimisi positiivse vahemikuga.

Kujutage ette olukorda, kus soovite, et positiivsed numbrid oleksid tavalised ja negatiivsed numbrid sulgudes, tundmatute väärtuste korral varugiga.

            @counter-style custom-finance {
  symbols: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9';
  suffix: '';
  negative: '(' ')' ; /* Negatiivsed numbrid sulgudes */
  fallback: decimal; /* Kasutage kõike muud kümnendkohtad */
  range: -infinity 0;
}

.account-balances {
  list-style-type: custom-finance;
}

            

              
                Copy
              
            
          

Kohandatud loenduri stiilide rakendamine

Kui @counter-style reegel on määratletud, saab seda rakendada mitmel viisil:

1. Loendi üksuste jaoks (<ul>, <ol>): Kasutage atribuuti list-style-type otse loendi elemendil või üksikutel loendi üksustel.
2. Suvaliste loendurite jaoks: Kasutage funktsiooni counter() CSS-atribuutide sees nagu content (sageli pseudoelementides nagu ::before või ::after).

list-style-type kasutamine

See on kõige sirgjoonelisem rakendus traditsiooniliste loendite jaoks.

            <ul>
  <li style="counter-set: mycount -5;">Esimene üksus</li>
  <li style="counter-set: mycount 10;">Teine üksus</li>
  <li style="counter-set: mycount -15;">Kolmas üksus</li>
</ul>

<style>
  /* Eeldage, et @counter-style negative-paren on eelnevalt määratletud */
  ul {
    list-style-type: negative-paren;
  }
  /* Kui kasutate counter-set'i üksikutel li-elementidel, peate võib-olla üle kirjutama */
  li {
     /* See ei tööta otseselt loenduri väärtuse kuvamiseks */
  }
</style>

<p>Tavalisem kasutusjuhtum loendite jaoks hõlmab loendi enda markerit, mitte tingimata counter-set'i üksikutel li elementidel. Kui teil on lihtsalt järjestatud loend ja soovite kontrollida, kuidas selle üksusi nummerdatakse, sealhulgas negatiivset nummerdamist (mis on standardsete ol markerite jaoks vähem tavaline, kuid võimalik koos counter-set ja counter() abil):</p>

            

              
                Copy
              
            
          

<style>
  @counter-style my-custom-list-style {
    symbols: 
    negative: 
  }
  ol {
    list-style-type: my-custom-list-style;
  }
</style>
<ol>
  <li>Esimene üksus ( oleks nummerdatud '1')</li>
  <li>Teine üksus ( oleks nummerdatud '2')</li>
</ol>

<p>Muidu suvaliste negatiivsete numbrite kuvamiseks loendi markeritena kasutatakse tavaliselt counter-set ja counter() pseudoelementides.</p>
</pre>

counter() kasutamine pseudoelementidega

Siin peitub tõeline jõud kohandatud numbrinäitude jaoks, eriti elementide puhul, mis ei ole standardloendid.

<div class="data-point"
     style="counter-set: value -12.5;"
>Väärtus</div>
<div class="data-point"
     style="counter-set: value 25.7;"
>Väärtus</div>

<style>
  @counter-style data-number {
    symbols: 
    negative: 
    suffix: '%';
    range: -infinity 0;
  }

  .data-point::before {
    content: counter(value, data-number) " ";
    display: inline-block;
    margin-right: 10px;
    font-weight: bold;
  }

  /* Näide: negatiivsete väärtuste erinev stiilimine */
  .data-point[style*='-12.5']::before {
    color: red;
  }
</style>


Ülaltoodud väljund oleks:


  
-12.5% (tõenäoliselt punane, sõltuvalt spetsiifilisest CSS-ist)
  
25.7%


Märge counter-set kohta: counter-set atribuuti rakendatakse tavaliselt eelnevale elemendile, et lähtestada või lähtestada loendur. Kui seda kasutatakse otse elemendil nagu .data-point, seab see loenduri selle konkreetse elemendi konteksti jaoks. Seejärel counter() selle väärtuse hangib.

Globaalsed kaalutlused ja parimad tavad

Globaalse publiku jaoks disainides järgige neid parimaid tavasid:


  
Uurige kohalikke konventsioone: Mõistke, kuidas negatiivseid numbreid ja valuutasid teie sihtpiirkondades esitatakse. Kuigi näited hõlmavad tavalisi vorminguid, võivad mõnel piirkonnal olla unikaalsed eelistused.
  
Testige põhjalikult: Testige oma rakendusi erinevates brauserites ja seadmetes. Veenduge, et renderdamine on järjepidev ja ootuspärane.
  
Prioriteetige loetavust: Peamine eesmärk on selge kommunikatsioon. Valige vorming, mis parandab arusaamist, mitte ei muuda seda keeruliseks. Standardne miinusmärk on sageli kõige universaalsemalt mõistetav.
  
Ligipääsetavus: Veenduge, et teie valitud vorming ei takista ekraanilugejaid ega muid abitehnoloogiaid. speak-as deskriptor võib siin olla kriitilise tähtsusega, kuid üldiselt käsitsevad abitehnoloogiad standardseid numbrilisi esitusi hästi.
  
Ühendage lokaliseerimisega (L10n): keerukate stsenaariumide korral, mis hõlmavad valuutasid, kuupäevi ja kellaaegu, kasutatakse CSS Counter Styles'i kõige paremini koos robustsete rahvusvahelise suhtluse teekide või serveripoolse logiikaga, mis tuvastab kasutaja asukoha ja rakendab sobiva vorminduse.
  
Kasutage varugisid: Pakkuge alati fallback loenduri stiili, et tagada sobiv degradeerumine, kui teie kohandatud stiili brauser ei toeta ega mõista. Sisseehitatud decimal stiil on ohutu valik.
  
Hoidke see lihtsana: Kui konkreetne piirkondlik nõue seda ei dikteeri, valige kõige lihtsam ja universaalsemalt tunnustatud vorming (tavaliselt ees olev miinusmärk).


Rahvusvahelised näited


  
Saksamaa: Kasutab sageli koma kümnendkoha eraldajana ja punkti tuhandete eraldajana. Negatiivsed numbrid võivad olla kuvatud kui -1.234,56 või mõnikord (1.234,56).
  
Jaapan: Tavaliselt kasutab tuhandete eraldamiseks komasid ja kümnendkohtade eraldamiseks punkte, negatiivsed numbrid kuvatakse kui -12,345.67.
  
Hiina: Sarnaselt Jaapaniga, kasutades tuhandete jaoks komasid ja kümnendkohtade jaoks punkte, negatiivsed numbrid on vormindatud kui -12,345.67.
  
Prantsusmaa: Kasutab tuhandete eraldamiseks tühikuid ja kümnendkohtade eraldamiseks koma. Negatiivsed numbrid võivad olla -1 234,56 või (1 234,56).


CSS Counter Styles saab määratleda symbols, et hallata kümnend- ja tuhandete eraldajaid, kuid negatiivse esituse põhistruktuur (prefiks, sufiks) on see, mida negative deskriptor otseselt kontrollib.

Piirangud ja brauseri tugi

Kuigi CSS Counter Styles moodul on võimas, on oluline olla teadlik brauseri toest. Kaasaegsed brauserid pakuvad üldiselt head tuge @counter-style ja selle deskriptoritele, sealhulgas negative. Vanemate brauserite või keskkondade jaoks, kus täielikku tuge ei ole tagatud, on varugid kriitilise tähtsusega.

Saate kontrollida praegust brauseri tuge sellistest allikatest nagu caniuse.com. Kui vanemate brauserite ühilduvus on range nõue, võib JavaScript-põhine lahendus olla varugina siiski vajalik.

Täpsemad tehnikad ja kohandamine

Lisaks põhilisele negative deskriptorile pakub CSS Counter Styles täiendavat kohandamist:


  
Kohandatud sümbolid numbrite jaoks: Saate määratleda oma numbrite tähemärkide komplektid, kasutades symbols deskriptorit. See võib olla kasulik mitte-ladina kirjade või kohandatud nummerdamissüsteemide jaoks.
  
pad-with fikseeritud laiuse jaoks: Veenduge, et teie numbrid säilitaksid ühtlase visuaalse laiuse, täites need ees olevate nullide või muude märkidga.
  
Keerukad vahemikud: Kuigi mitte otseselt negatiivse vormindamise jaoks, saab range deskriptorit kombineerida additive-symbols'iga keerukamate numbriliste süsteemide jaoks, kus positiivsetel ja negatiivsetel väärtustel võivad olla täiesti erinevad alusrepresentatsioonid.


Näiteks numbrite vormindamiseks ees oleva nulliga ühekohaliste numbrite jaoks ja negatiivsete väärtuste jaoks sulgude kasutamiseks:

@counter-style padded-negative {
  symbols: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9';
  suffix: '';
  pad-with: '0'; /* Täida nulliga vähemalt 2 numbri ulatuses */
  negative: '(' ')' ; 
  range: -99 99; /* Rakenda täitmist ainult selles vahemikus */
}


See kuvaks -5 kui (-05), kui pad-with rakenduks absoluutväärtusele, või (-5), kui pad-with mõjutab ainult positiivset esitust. Täpne käitumine võib olla nüansseeritud ja testimine on võti.

Järeldus

CSS Counter Styles moodul, eriti negative deskriptor, annab veebidisaineritele ja arendajatele võimaluse rakendada keerukat ja kultuuriliselt sobivat negatiivsete numbrite vormindamist otse CSS-is. See natiivne lähenemine loob puhtama koodi, parandab jõudlust ja tagab robustsema rahvusvahelise suhtlusstrateegia.

@counter-style mõistmise ja kasutamise abil saate minna kaugemale üldistest numbrinäitudest ja luua kasutajakogemusi, mis on mitte ainult visuaalselt atraktiivsed, vaid ka austavad globaalseid konventsioone. Ükskõik, kas vormindate finantsandmeid, tulemusi või mis tahes muud numbrilist teavet, nende CSS-võimaluste valdamine on oluline samm tõeliselt globaalselt valmis veebisaitide loomisel.

Alustage kohandatud loenduri stiilide katsetamist juba täna, et tõsta oma disaini taset ja tagada, et teie numbrid oleksid selged igale kasutajale, olenemata tema asukohast maailmas.